<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="iconfont/iconfont.css">
        <link rel="stylesheet" href="css/task.css">
        <script src="js/flexible.js"></script>
    </head>
    <body>
        <!-- 顶部状态栏 -->
        <div class="nav">
            <a href="#"><span class="iconfont icon-xiangzuojiantou"></span></a>
            <h2>会员任务</h2>
        </div>
        <!-- 等级部分 -->
        <div class="grade">
            <div class="top">
                <div class="left">
                    <p> 当前等级</p>
                    <div class="top_right">
                        <span class="iconfont icon-qia"></span>粉丝卡
                    </div>
                </div>
                <div class="bottom">
                    <a href="#">当前积分
                        <div class="bottom_right">1150<img
                                src="images/fh备份@3x.png" alt></div>
                    </a>
                </div>
            </div>
        </div>
        <!-- 周期任务 -->
        <div class="task">
            <a class="sign" href="#">签到</a>
            <a class="finish" href="#">去完成</a>
            <div class="demo">
                <a href="#">周期任务
                    <div class="circle"></div>
                </a>
            </div>
            <div class="demo1">
                <ul>
                    <li>每日签到</li>
                    <li>积分<span class="num">+10</span></li>
                </ul>
            </div>
            <div class="demo1">
                <ul>
                    <li>储值</li>
                    <li>积分<span class="num">+30</span></li>
                </ul>
            </div>
            <div class="demo1">
                <ul>
                    <li>线下消费</li>
                    <li>1元累加1积分</li>
                </ul>
            </div>
            <div class="demo1">
                <ul>
                    <li>全国任意门店单笔消费1000元或年累计消费3000</li>
                    <li>积分<span class="num">+30</span></li>
                </ul>
            </div>
            <div class="demo1">
                <ul>
                    <li>全国任意门店单笔消费2000元或年累计消费8000</li>
                    <li>积分<span class="num">+30</span></li>
                </ul>
            </div>
            <div class="demo1">
                <ul>
                    <li>全国任意门店单笔消费8000元或年累计消费20000</li>
                    <li>积分<span class="num">+30</span></li>
                </ul>
            </div>
        </div>
        <!-- 成长任务 -->
        <div class="dev">
            <a class="finished" href="#">已完成</a>
            <a class="finish" href="#">去完成</a>
            <div class="demo">
                <a href="#">成长任务
                    <div class="circle"></div>
                </a>
            </div>
            <div class="demo1">
                <ul>
                    <li>首次成为LMOR会员</li>
                    <li>积分<span class="num">+30</span></li>
                </ul>
            </div>
            <div class="demo2">
                <ul>
                    <li>完善个人资料</li>
                    <li>积分<span class="num">+30</span></li>
                </ul>
            </div>
        </div>
        <!-- 底部 -->
        <div class="bot">
            <img src="images/编组备份.svg" alt>
        </div>
    </body>
</html>